<template>
  <view class="content">
    <!-- 透明盒子 -->
    <view class="TMbox">
    </view>
    <!-- 欢迎语 -->
    <view class="helloBox">您好, 欢迎光临!</view>
    <!-- 内容区 -->
    <view class="main">
      <!-- 顶部 -->
      <view class="top">
        <view class="left">
          <img src="@/assets/home/consume.svg" alt="">
          <view class="text">超多消费点</view>
          <img class="arrRight" src="@/assets/home/arr_right.svg" alt="">
        </view>
        <view class="right">
          <img src="@/assets/home/getFood.svg" alt="">
          <view class="text">取餐点查询</view>
          <img class="arrRight" src="@/assets/home/arr_right.svg" alt="">
        </view>
      </view>
      <!-- 取餐提示 -->
      <view class="food">
        <view class="f_left">
          <img :src="qu_food[qu_index].icon || '@/assets/home/consume.svg'" alt="">
          <view class="f_text">
            <view class="f_name">
              <view class="f_name_left">{{ qu_food[qu_index].name }}</view>
              <view :class="qu_food[qu_index].status == '待出餐' ? 'f_name_right_no' : 'f_name_right'">{{
                qu_food[qu_index].status
              }}</view>
            </view>
            <view class="f_code">
              <view class="f_code_left">取餐码: </view>
              <view class="f_code_right">{{ qu_food[qu_index].orderId }}</view>
            </view>
            <view class="f_address">
              <view class="f_address_left">取餐点: </view>
              <view class="f_address_right">{{ qu_food[qu_index].address }}</view>
            </view>
          </view>
        </view>
        <view class="f_right" @click='to_code'>
          <img src="@/assets/home/code.svg" alt="">
          <view class="f_right_text">取餐条码</view>
        </view>
        <!-- 取餐区左右按钮 -->
        <view class="f_btn_left" @click="qu_next"></view>
        <view class="f_btn_right" @click="qu_pre"></view>
      </view>
      <!-- 食堂介绍 -->
      <view class="introduce">
        <view class="i_title">校园食堂介绍</view>
        <view class="i_main">
          {{ schoolIntroduce || '暂无' }}
        </view>
        <view class="i_detail" @click="showDetail">详情 ></view>
      </view>
      <!-- 特色菜品 -->
      <!-- 轮播图 -->
      <view class="special_title">
        <view class="s_left">特色菜品</view>
        <view class="s_right">
          <view class="s_now">{{ s_nowIndex + 1 }}</view>
          <view class="s_all">/{{ special_food.length }}</view>
        </view>
      </view>
      <view class="u-demo-block">
        <!-- <text class="u-demo-block__title">卡片式</text> -->
        <up-swiper @change="swiperChange" :list="list" previousMargin="0" interval="5s" nextMargin="100" circular
          :autoplay="true" radius="5" bgColor="#ffffff"></up-swiper>
      </view>
      <view class="special_detail">
        <view class="s_name">
          <view class="name_now">{{ special_food[s_nowIndex].name }}</view>
          <view class="name_next">{{ special_food[s_preIndex].name }}</view>
        </view>
        <view class="s_price">
          <view class="price_now">
            <view class="yuan">￥</view>
            <view class="price">{{ special_food[s_nowIndex].price }}</view>
          </view>
          <view class="price_next">
            <view class="yuan">￥</view>
            <view class="price">{{ special_food[s_preIndex].price }}</view>
          </view>
        </view>
      </view>

      <view class="special">
      </view>
      <!-- 在这里添加一些内容来测试滚动 -->
      <!-- <view v-for="item in 20" :key="item" class="item">
        这是第 {{ item }} 条内容
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue';
import { getAllFood } from '@/api/school/index'
import useUserStore from '@/store/modules/user'
import useSchoolStore from '@/store/modules/school'
import { getAllSchoolInfo } from "@/api/school/index";
import { getUserInfo } from "@/api/user/index";
import { searchAllOrder } from "@/api/order";

const userStore = useUserStore()
const useSchool = useSchoolStore()

// isFinish: 是否可取餐
let qu_food = ref([
  { icon: 'https://foruda.gitee.com/avatar/1722430660907879170/13892988_xiaoxin-programming_1722430660.png!avatar30', name: '早餐', isFinish: true, code: "9527", address: "女生宿舍区L5一楼门卫室" },
  { icon: 'https://foruda.gitee.com/avatar/1722430660907879170/13892988_xiaoxin-programming_1722430660.png!avatar30', name: '午餐', isFinish: false, code: "9528", address: "男生宿舍区L5一楼门卫室" },
  { icon: 'https://foruda.gitee.com/avatar/1722430660907879170/13892988_xiaoxin-programming_1722430660.png!avatar30', name: '晚餐', isFinish: true, code: "9529", address: "女生宿舍区L5一楼门卫室" },
  { icon: 'https://pic.ntimg.cn/file/20240325/33081685_232138973102_2.jpg', name: '隆江猪脚饭', isFinish: false, code: "9530", address: "女55舍区L5一楼门卫室" },
])
// 记录显示的取餐商品
let qu_index = ref(0);

// 切换显示的取餐餐品
let qu_next = () => {
  // 当没超出长度时
  if (qu_index.value < qu_food.value.length - 1) {
    qu_index.value += 1;
  } else {
    qu_index.value = 0;
  }
};

let qu_pre = () => {
  if (qu_index.value > 0) {
    qu_index.value -= 1;
  } else {
    qu_index.value = qu_food.value.length - 1;
  }
};

//特色菜品数据
let special_food = ref([
  { img: "https://ts1.tc.mm.bing.net/th/id/R-C.28f266b4b3f77eef6da4bbb818576249?rik=DCjZo%2fFhg2J3eQ&riu=http%3a%2f%2fcp1.douguo.net%2fupload%2fcaiku%2fd%2f2%2f5%2fyuan_d2645c7fc5fea33fce31b934b9f6c735.jpg&ehk=WruoTau6wBodOKfyD1f0fSPmP6liWcmS8%2bniDqvk8cs%3d&risl=&pid=ImgRaw&r=0", name: "火腿鸡肉饭", price: "18.00" },
  { img: "https://materials.cdn.bcebos.com/images/39275436/26649005146a34c5ba54ba695f238091.jpeg", name: "鱼香肉丝", price: "15.80" },
  { img: "https://pic.ntimg.cn/file/20231123/29375735_195431459101_2.jpg", name: "隆江猪脚饭", price: "16.98" },
])

// 轮播图图片
let list = ref([])

special_food.value.forEach(item => {
  list.value.push(item.img)
})

// 记录当前轮播图下标
let s_nowIndex = ref(0)

// 记录下一个轮播图下标
let s_preIndex = ref(1)

// 轮播图轮播事件
let swiperChange = (index) => {
  s_nowIndex.value = index.current
  // 计算下一个轮播图下标
  s_preIndex.value = (s_nowIndex.value + 1) % special_food.value.length

}
// 展示食堂详情
let showDetail = () => {
  if (!userStore.userId) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
  } else {
    uni.navigateTo({ url: '/pages/components/index/canteen_product' })
  }
}

/**
 * 查询用户所有订单
 */
let allOrder = ref([])
let food = ref([]) // 展示餐品
let getInfo = () => {
  if (!userStore.userId) {
    console.log("用户id不存在, 无法查询")
    return
  }
  searchAllOrder({ userId: userStore.userId }).then(res => {
    if (res.code == 200) {
      allOrder.value = res.data
      AddStatus(allOrder.value)
      console.log(allOrder.value);
      // 过滤出状态为带取餐的餐品
      food.value = allOrder.value.filter(item => item.status == '待取餐' || item.status == '待出餐')
      qu_food.value = food.value.map(item => {
        // 获取order中的第一个元素
        const orderItem = item.order[0];
        // 获取goods中的第一个元素
        const goodsItem = orderItem.goods[0];
        return {
          _id: item._id,
          startTime: item.startTime,
          status: item.status,
          totalCount: item.totalCount,
          address: item.address.join('-'),
          takeFoodTime: item.takeFoodTime.join('-'),
          allCount: orderItem.allCount,
          allPrice: orderItem.allPrice,
          remark: orderItem.remark,
          orderId: orderItem.orderId,
          sellerName: orderItem.sellerName,
          sellerId: orderItem.sellerId,
          price: goodsItem.price,
          name: goodsItem.name,
          icon: goodsItem.icon,
          dec: goodsItem.dec
        };
      });
      console.log('food.value: ', food.value);
      console.log('qu_food.value: ', qu_food.value);
    }
  })
}
getInfo()
// 监听页面激活
onActivated(() => {
  // 获取订单数据
  getInfo()
});


// 为所有订单加上状态字段
let AddStatus = (data) => {
  allOrder.value = data.map(order => {
    return { ...order, status: orderStatus(order.startTime, order.isPay, order.isSend, order.isReceive) }
  });
  console.log('allOrder: ', allOrder.value);
}
const orderStatus = (time, isPay, isSend, isReceive) => {
  const currentTime = new Date();
  const orderTime = new Date(Number(time));
  const timeDiff = (currentTime - orderTime) / (1000 * 60); // 计算时间差，单位为分钟

  if (timeDiff > 10 && !isPay) {
    return '超时';
  }

  if (!isPay) {
    return '待付款';
  }

  if (!isSend) {
    return '待出餐';
  }

  if (!isReceive) {
    return '待取餐';
  }

  return '已完成';
};

/**
 * 获取学校的所有菜品
 */
getAllFood({ schoolId: userStore.userInfo.schoolId }).then(res => {
  console.log('res: ', res);
  if (res.code == 200) {
    useSchool.allCanteen = res.canteenData
    console.log('useSchool.allCanteen: ', useSchool.allCanteen);
  }
})
let schoolIntroduce = ref('')
// 查询所有学校数据
getAllSchoolInfo().then(res => {
  if (res.code == 200) {
    if (userStore.userInfo.schoolId) {
      let nowSchool = res.schoolData.find(item => item._id == userStore.userInfo.schoolId)
      useSchool.schoolCanteen = nowSchool.canteen
      schoolIntroduce.value = useSchool.schoolCanteen[0].introduce
    }
  }
})

/**
 * 查询用户信息
 */
let getCurrentUserInfo = () => {
  if (userStore.userId) {
    getUserInfo({ userId: userStore.userId || '' }).then(res => {
      userStore.getInfo(res.userInfo)
    })
  }
}
// 获取用户数据
getCurrentUserInfo()
/**
 * 去取餐条码页面
 */
let to_code = () => {
  const codeDataStr = encodeURIComponent(JSON.stringify(qu_food.value[qu_index.value]));
  uni.navigateTo({ url: `/pages/components/index/getFood_code?codeData=${codeDataStr}` })
}
</script>


<style lang='scss' scoped>
.content {
  height: calc(100vh - 100rpx);
  overflow: auto;
  background-image: url("@/assets/home/home_bg.png");
  background-size: cover;
  background-position: 0% 350%;
  position: relative;
  background-repeat: no-repeat;

  .TMbox {
    width: 100%;
    height: 400rpx;
    text-align: end;
    padding: 40rpx;
  }

  .helloBox {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: white;
  }

  .main {
    background-color: $uni-bg-color-grey;
    padding: 20rpx 30rpx;
    border-radius: 24rpx;

    .top {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      background-color: white;
      border-radius: 20rpx;

      .left,
      .right {
        width: 50%;
        height: 100rpx;
        display: flex;
        align-items: center;

        img {
          width: 60rpx;
          height: 60rpx;

        }

        .text {
          font-size: 28rpx;
          margin: 0 30rpx;
          font-weight: 600;
        }

        .arrRight {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .left {
        border-right: 2rpx solid #dfdfdf;
        padding-right: 20rpx;
      }

      .right {
        padding-left: 20rpx;
        justify-content: end;
      }
    }

    .food {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      background-color: white;
      border-radius: 20rpx;
      margin-top: 20rpx;
      position: relative;

      .f_left,
      .f_right {
        // height: 100rpx;
        display: flex;
        align-items: center;

        img {
          width: 100rpx;
          height: 100rpx;
        }

        .f_text {
          margin: 0 30rpx;
          display: flex;
          flex-direction: column;
          color: $uni-text-color;
          font-size: 24rpx;

          .f_name {
            display: flex;
            align-items: center;

            .f_name_left {
              font-size: 26rpx;
              font-weight: 600;
              margin-right: 10rpx;
            }

            .f_name_right {
              font-size: 24rpx;
              color: #2cc833;
              padding: 4rpx 10rpx;
              display: flex;
              align-items: center;
              border-radius: 26rpx;
              border: 1px solid;
              background-color: #e9f9ea;
            }

            .f_name_right_no {
              font-size: 24rpx;
              color: #e98432;
              padding: 4rpx 10rpx;
              display: flex;
              align-items: center;
              border-radius: 26rpx;
              border: 1px solid;
              background-color: #ff760535;
            }
          }

          .f_code,
          .f_address {
            display: flex;
            align-items: center;
            margin-top: 10rpx;

            .f_code_left,
            .f_address_left {
              width: 80rpx;
              font-weight: 600;
              color: $uni-text-color-grey;
            }

            .f_code_right,
            .f_address_right {
              margin-left: 8rpx;
              width: 60%;
              white-space: nowrap; // 防止文本换行
              overflow: hidden; // 隐藏超出部分
              text-overflow: ellipsis; // 显示省略号
            }
          }

        }

        .arrRight {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .f_left {
        width: 75%;
        border-right: 2rpx solid #dfdfdf;
        padding-right: 20rpx;
      }

      .f_right {
        width: 30%;
        padding-left: 20rpx;
        justify-content: space-between;
        flex-direction: column;
        color: $uni-text-color-grey ;

        img {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }

        .f_right_text {
          font-size: 26rpx;
        }
      }

      .f_btn_left,
      .f_btn_right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32rpx;
        height: 32rpx;
        background-image: url("@/assets/home/f_arr_right.svg");
        background-size: cover;

        &:hover {
          background-image: url("@/assets/home/f_arr_right_act.svg");
          cursor: pointer;
        }
      }

      .f_btn_left {
        left: 4rpx;
        transform: rotate(180deg);
      }

      .f_btn_right {
        right: 4rpx;
      }
    }

    .item {
      margin-bottom: 10px;
      background-color: #f3f3f3;
      border: 1px solid #ddd;
    }
  }

  .introduce {
    width: 100%;
    display: flex;
    padding: 20rpx 30rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-top: 20rpx;
    position: relative;
    font-size: 24rpx;
    flex-direction: column;

    .i_title {
      font-weight: 600;
      font-size: 28rpx;
    }

    .i_main {
      color: $uni-text-color-grey;
      line-height: 36rpx;
      margin: 16rpx 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* 设置需要显示的行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .i_detail {
      color: $uni-text-color-blue;
      width: 100%;
      text-align: end;
    }
  }

  .special_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 20rpx;
    background-color: white;
    border-radius: 20rpx 20rpx 0 0;
    margin-top: 30rpx;
    color: $uni-text-color;

    .s_left {
      font-size: 28rpx;
      font-weight: 600;
    }

    .s_right {
      display: flex;
      font-size: 28rpx;
      align-items: center;

      .s_all {
        color: $uni-text-color-grey;
        font-size: 24rpx;
      }
    }
  }

  .special_detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 20rpx;
    background-color: white;
    border-radius: 0 0 20rpx 20rpx;
    color: $uni-text-color;

    .s_name,
    .s_price {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .s_name {
      font-size: 26rpx;
      font-weight: 600;
    }

    .s_price {
      font-size: 24rpx;
      font-weight: 600;
      margin-top: 10rpx;

      .price_now,
      .price_next {
        display: flex;
        align-items: center;

        .yuan {
          font-size: 26rpx;
        }
      }
    }

  }
}
</style>